<template>
  <section class="todoapp">
    <el-tooltip class="item" effect="dark" content="该待办笔记仅在本浏览器记录,不会与服务器同步." placement="top-end">
      <i class="el-icon-question fr" />
    </el-tooltip>
    <!-- header -->
    <header class="header">
      <input class="new-todo" autocomplete="off" placeholder="在此输入待办笔记" @keyup.enter="addTodo" />
    </header>
    <!-- main section -->
    <section v-show="todos.length" class="main">
      <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })" />
      <label for="toggle-all" />
      <ul class="todo-list">
        <todo v-for="(todo, index) in filteredTodos" :key="index" :todo="todo" @toggleTodo="toggleTodo" @editTodo="editTodo" @deleteTodo="deleteTodo" />
      </ul>
    </section>
    <!-- footer -->
    <footer v-show="todos.length" class="footer">
      <span class="todo-count">
        <strong>{{ remaining }}</strong>
        {{ remaining | pluralize('个任务') }}
      </span>
      <ul class="filters">
        <li v-for="(val, key) in filters" :key="key">
          <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
        </li>
      </ul>
      <button title="清空已完成" class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
        <!-- 清空已完成 -->
        <i class="el-icon-delete" />
      </button>
    </footer>
  </section>
</template>

<script>
import Todo from './Todo.vue';

const STORAGE_KEY = 'todos';
const filters = {
  全部: (todos) => todos,
  待完成: (todos) => todos.filter((todo) => !todo.done),
  已完成: (todos) => todos.filter((todo) => todo.done),
};
const defalutList = [
  { text: '在此可记笔记', done: false },
  { text: '笔记可以标识完成状态', done: true },
];
export default {
  components: { Todo },
  filters: {
    pluralize: (n, w) => (n === 1 ? w : `${w}`),
    capitalize: (s) => s.charAt(0).toUpperCase() + s.slice(1),
  },
  data() {
    return {
      visibility: '全部',
      filters,
      todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList,
    };
  },
  computed: {
    allChecked() {
      return this.todos.every((todo) => todo.done);
    },
    filteredTodos() {
      return filters[this.visibility](this.todos);
    },
    remaining() {
      return this.todos.filter((todo) => !todo.done).length;
    },
  },
  methods: {
    setLocalStorage() {
      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos));
    },
    addTodo(e) {
      const text = e.target.value;
      if (text.trim()) {
        this.todos.push({
          text,
          done: false,
        });
        this.setLocalStorage();
      }
      e.target.value = '';
    },
    toggleTodo(val) {
      val.done = !val.done;
      this.setLocalStorage();
    },
    deleteTodo(todo) {
      this.todos.splice(this.todos.indexOf(todo), 1);
      this.setLocalStorage();
    },
    editTodo({ todo, value }) {
      todo.text = value;
      this.setLocalStorage();
    },
    clearCompleted() {
      this.todos = this.todos.filter((todo) => !todo.done);
      this.setLocalStorage();
    },
    toggleAll({ done }) {
      this.todos.forEach((todo) => {
        todo.done = done;
        this.setLocalStorage();
      });
    },
  },
};
</script>

<style lang="scss" src="./index.scss" />
